import React from 'react';
import {
  makeStyles,
  Card,
  Button,
  Text,
} from '@fluentui/react-components';
import {
  DataUsage20Regular,
  ArrowDownload20Regular,
} from '@fluentui/react-icons';

const useStyles = makeStyles({
  container: {
    display: 'flex',
    flexDirection: 'column',
    gap: '24px',
  },
  header: {
    display: 'flex',
    justifyContent: 'space-between',
    alignItems: 'center',
  },
  title: {
    fontSize: '24px',
    fontWeight: '600',
    color: '#1D2129',
    margin: 0,
  },
  actions: {
    display: 'flex',
    gap: '12px',
  },
  contentCard: {
    padding: '40px',
    textAlign: 'center',
  },
  placeholderIcon: {
    fontSize: '48px',
    color: '#86909C',
    marginBottom: '16px',
  },
  placeholderText: {
    fontSize: '16px',
    color: '#86909C',
    marginBottom: '24px',
  },
});

const AnalyticsPage: React.FC = () => {
  const classes = useStyles();

  return (
    <div className={classes.container}>
      <div className={classes.header}>
        <h1 className={classes.title}>数据分析</h1>
        <div className={classes.actions}>
          <Button appearance="secondary" icon={<ArrowDownload20Regular />}>
            导出报告
          </Button>
        </div>
      </div>

      <Card className={classes.contentCard}>
        <DataUsage20Regular className={classes.placeholderIcon} />
        <Text className={classes.placeholderText}>
          数据分析功能正在开发中...
        </Text>
        <Text size={300} style={{ color: '#86909C' }}>
          这里将提供成单率分析、转化漏斗和团队绩效等功能
        </Text>
      </Card>
    </div>
  );
};

export default AnalyticsPage;
